<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>回收箱位置导航</title>
    <link rel="stylesheet" href="//res.wx.qq.com/open/libs/weui/1.1.3/weui.min.css">
    <style>
        .weui-tabbar__label{
            font-size: 18px;
        }
        #container{
            width:100%;
            height: calc(100vh - 60px);
        }

    </style>
</head>
<body>
<div class="page">
    <div class="page__bd" style="height: 100%;">
<div id="container" >

</div>
<div class="weui-tab">
    <div class="weui-tab__panel">

    </div>
    <div class="weui-tabbar">
        <div class="weui-tabbar__item weui-bar__item_on">
            <p class="weui-tabbar__label" id="driving">驾车</p>
        </div>
        <div class="weui-tabbar__item">
            <p class="weui-tabbar__label" id="bus">公交</p>
        </div>
        <div class="weui-tabbar__item">
            <p class="weui-tabbar__label" id="foot">步行</p>
        </div>
        <div class="weui-tabbar__item">
            <p class="weui-tabbar__label" id="bike">骑行</p>
        </div>
    </div>
</div>
    </div>
</div>
</body>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=k6hUNlqyGNy0xyK60Un9hpFe2a8Fxch1">
</script>
<script src="https://cdn.staticfile.org/zepto/1.2.0/zepto.min.js"></script>
<script>
    var start = new BMap.Point(${from[0]}, ${from[1]});
    var end = new BMap.Point(${to[0]}, ${to[1]});
    $(function(){
        var map = new BMap.Map("container");
        map.centerAndZoom(new BMap.Point(${from[0]}, ${from[1]}), 14);

        $("#driving").click(function(){
            changeSelected(this.id);
            var driving = new BMap.DrivingRoute(map, {
                renderOptions: {
                    map: map,
                    autoViewport: true
                }
            });
            driving.search(start, end);
        })
        $("#bus").click(function(){
            changeSelected(this.id)
            var transit = new BMap.TransitRoute(map, {
                renderOptions: {
                    map: map,
                    autoViewport: true
                }
            });
            transit.search(start, end);
        })
        $("#foot").click(function(){
            changeSelected(this.id);
            var walk = new BMap.WalkingRoute(map, {
                renderOptions: {map: map}
            });
            walk.search(start, end);
        })
        $("#bike").click(function(){
            changeSelected(this.id);
            var riding = new BMap.RidingRoute(map, {
                renderOptions: {map: map}
            });
            riding.search(start, end);
        });
        $("#driving").click();
    })
    function changeSelected(typeId){
        $(".weui-tabbar__label").css("color","black");
        $("#"+typeId).css("color","green");
    }

</script>
</html>